<template>
    <form method="post">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="项目名称" prop="name" style="width: 96%">
                        <el-input v-model="ruleForm.name" placeholder="请填写项目名称"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="项目区位" prop="xmlocation">
                        <el-input v-model="ruleForm.xmlocation" style="width: 90%"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="项目类型" prop="xmtype">
                        <el-select v-model="ruleForm.town" placeholder="请选择乡镇" style="width: 90%">
                            <el-option label="旱地改水田提升" value="hangaishui"></el-option>
                            <el-option label="垦造水田" value="shuitian"></el-option>
                            <el-option label="垦造耕地" value="gengdi"></el-option>
                            <el-option label="建设用地复垦" value="jianshefuken"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- <el-row>
                <el-col :span="12">
                    <el-form-item label="所在乡镇" prop="town">
                        <el-select v-model="ruleForm.town" placeholder="请选择乡镇" style="width: 90%">
                            <el-option label="桐君街道" value="tongjun"></el-option>
                            <el-option label="城南街道" value="chengnan"></el-option>
                            <el-option label="旧县街道" value="jiuxian"></el-option>
                            <el-option label="凤川街道" value="fengchuan"></el-option>
                            <el-option label="江南镇" value="jiangnan"></el-option>
                            <el-option label="横村镇" value="hengcun"></el-option>
                            <el-option label="富春江镇" value="fuchunjiang"></el-option>
                            <el-option label="瑶琳镇" value="yaolin"></el-option>
                            <el-option label="分水镇" value="fenshui"></el-option>
                            <el-option label="百江镇" value="baijiang"></el-option>
                            <el-option label="钟山乡" value="zhongshan"></el-option>
                            <el-option label="新合乡" value="xinhe"></el-option>
                            <el-option label="莪山乡" value="eshan"></el-option>
                            <el-option label="合村乡" value="hecun"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="项目距县城距离（公里）" prop="distance">
                        <el-input v-model="ruleForm.distance" placeholder="请填写数字" style="width: 90%"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="计划开工时间" prop="datekg">
                        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.datekg" style="width: 90%"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="计划竣工时间" prop="datejg">
                        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.datejg" style="width: 90%"></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item label="立项编号" prop="lxbh">
                        <el-input v-model="ruleForm.lxbh" style="width: 90%"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="项目建设期（年）" prop="xmjsq">
                        <el-input v-model="ruleForm.xmjsq" placeholder="请填写数字" style='width:90%;'></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="立项日期" prop="lxrq">
                        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.lxrq" style="width: 90%"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="立项文号" prop="lxwh">
                        <el-input v-model="ruleForm.lxwh" style='width:90%;'></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="立项文件名称" prop="lxwjmc">
                        <el-input v-model="ruleForm.lxwjmc" style='width:90%;'></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="立项机关" prop="lxjg">
                        <el-input v-model="ruleForm.lxjg" style='width:90%;'></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item label="申请开发单位" prop="lxwjmc">
                        <el-input v-model="ruleForm.lxwjmc" style='width:90%;'></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="是否灾毁项目" prop="lxjg">
                        <el-input v-model="ruleForm.lxjg" style='width:90%;'></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="是否全域项目" prop="lxwjmc">
                        <el-input v-model="ruleForm.lxwjmc" style='width:90%;'></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="全域项目名称" prop="lxjg">
                        <el-input v-model="ruleForm.lxjg" style='width:90%;'></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="是否涉林" prop="lxwjmc">
                        <el-input v-model="ruleForm.lxwjmc" style='width:90%;'></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="是否发布林权证" prop="lxjg">
                        <el-input v-model="ruleForm.lxjg" style='width:90%;'></el-input>
                    </el-form-item>
                </el-col>
            </el-row> -->
                


            <!-- 
            <el-row>
                <el-col :span="12">
                    <el-form-item label="项目名称" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="活动区域" prop="region">
                        <el-select v-model="ruleForm.region" placeholder="请选择活动区域" style="width:100%;">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="活动时间" required>
                <el-col :span="11">
                    <el-form-item prop="date1">
                        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col class="line" :span="2">-</el-col>
                <el-col :span="11">
                    <el-form-item prop="date2">
                        <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%"></el-time-picker>
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item label="即时配送" prop="delivery">
                <el-switch v-model="ruleForm.delivery"></el-switch>
            </el-form-item>
            <el-form-item label="活动性质" prop="type">
                <el-checkbox-group v-model="ruleForm.type">
                    <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                    <el-checkbox label="地推活动" name="type"></el-checkbox>
                    <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                    <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="特殊资源" prop="resource">
                <el-radio-group v-model="ruleForm.resource">
                    <el-radio label="线上品牌商赞助"></el-radio>
                    <el-radio label="线下场地免费"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="活动形式" prop="desc">
                <el-input type="textarea" v-model="ruleForm.desc"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item> -->
        </el-form>
    </form>
</template>

<script>
export default {
    data() {
        var checkNum = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('数字不能为空'));
            }
            if (isNaN(value)) {
                return callback(new Error('请输入数字值'));
            }
            callback();
        };
        return {
            ruleForm: {
                name: '',
                city: '杭州市',
                region: '桐庐县',
                town:'',
                distance: '',
                datekg:'',
                datejg:'',
                xmlocation:'',
                lxbh:'',
                xmjsq:'',
                lxrq:'',
                lxwh:'',
                lxwjmc:'',
                lxjg:'',
                // date1: '',
                // date2: '',
                // delivery: false,
                // type: [],
                // resource: '',
                // desc: '',
                //
                // town: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入项目名称', trigger: 'blur' }
                    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                city: [{ required: true, message: '请填写所在市', trigger: 'change' }],
                region: [{ required: true, message: '请填写所在县', trigger: 'change' }],
                town: [{ required: true, message: '请选择所在乡镇', trigger: 'change' }],
                distance: [{ validator: checkNum, trigger: 'blur' }],
                xmjsq: [{ validator: checkNum, trigger: 'change' }],
                lxrq: [{ required: true, message: '请选择立项日期', trigger: 'change' }],
                lxwh: [{ required: true, message: '请选择立项文号', trigger: 'change' }],
                lxwjmc: [{ required: true, message: '请填写立项文件名称', trigger: 'change' }],
                lxjg: [{ required: true, message: '请填写立项机关', trigger: 'change' }],
                // date1: [{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }],
                // date2: [{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }],
                // type: [{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }],
                // resource: [{ required: true, message: '请选择活动资源', trigger: 'change' }],
                // desc: [{ required: true, message: '请填写活动形式', trigger: 'blur' }]
            }
        };
    },
    created() {
        this.init();
    },
    watch: {
        //监听
        $route(to, from) {
            //路由变化方式，路由发生变化，方法就会执行
            this.init();
        }
    },
    methods: {
        init() {
            //判断路径有id值,做修改
            if (this.$route.query && this.$route.query.id) {
                //从路径获取id值
                const id = this.$route.query.id;
                //调用根据id查询的方法
                this.getInfo(id);
            } else {
                //路径没有id值，做添加
                //清空表单
                this.information = {};
            }
        },
        saveOrUpdate() {
            //判断修改还是添加
            //根据teacher是否有id
            if (!this.information.id) {
                //添加
                this.onSubmit();
            } else {
                alert('sss');
                //修改
                this.update();
            }
        },
        onSubmit() {
            label.save(this.information).then((Response) => {
                this.$message({
                    type: 'success',
                    message: '添加成功!'
                });
            });
        },
        tonew() {
            this.information = {};
        },
        shutdown() {
            window.close();
        },
        getInfo(id) {
            label.openInfo(id).then((response) => {
                this.information = response.data;
            });
        },
        update() {
            label.updateInfo(this.$route.query.id, this.information).then((response) => {
                this.$message({
                    type: 'success',
                    message: '修改成功!'
                });
            });
        }
    }
};
</script>
<style scoped>
.el-divider {
    margin: -9px 0 -9px 0;
    background: 0 0;
    border-top: 1px solid #e6ebf5;
}
</style>